import React, { Component } from "react";
import { Provider, useSelector } from "react-redux";
import useAppShow from "@packages/runtime/src/hooks/useAppShow";
import { createStore } from "redux";
import { View, Text, Button } from "@moyoko/components";
import todoApp from "./store";

let store: any = createStore(todoApp);

//import "./app.css";
const XText = (props, context) => {
  console.log("context", context);
  const _state = useSelector((state) => state);
  console.log("app=>state:", _state);
  useAppShow(() => {
    console.log("useAppShow");
  });

  return <Text className={props.className}>{props.content}</Text>;
};

export default class App extends Component<any, any> {
  state = {
    text: Date.now(),
    show: false,
  };

  constructor(props) {
    super(props);
    console.log("props", props);
  }

  onLaunch(options) {
    console.log("ApponLaunch", options);
  }
  onShow() {
    console.log("ApponShow");
  }
  onButtonClick = () => {
    this.setState(() => ({ text: Date.now(), show: !this.state.show }));
  };
  render() {
    return (
      <Provider store={store}>
        <XText className="hello-class" content={this.state.text} />
        <Text style={{ color: "blue" }}>World</Text>
        <Button onClick={this.onButtonClick}>Get current time</Button>
        {!this.state.show ? <View>asdasdasd</View> : <Text>adas1111</Text>}
      </Provider>
    );
  }
}

// ReactDOM.render(<App />, document.getElementById("root"));
// const a = CustomRenderer.render(<App />, document.getElementById("root"));

// console.log(a);
